div.wrapper{
	position: absolute;
    display: flex;
    justify-content: space-between;
    max-width: 767px;
    top: 82px;

	div.tab-list {
		margin-left: 150px;
		flex: 1;
		display: flex;
		flex-direction: row;
		button {
			outline: none;
		}
		button.tab {
			cursor: pointer;
			min-width: 50px;
			background:  transparent;
			border: none;
			padding: 10px;
			margin-right: 15px;
			font-family: Arial, sans-serif;
			color: #777;
			text-align: center;
			font-size: 0.9em;
			&:hover {
				color: #222;
			}
		}

		button.tab.selected {
			color: #4285f4;
			border-bottom: 3px solid #4285f4;
			outline: none;
			font-weight: bold;
		}
	}

	h5.display-media {
		font-family: Arial, sans-serif;
		font-size: 14px;
	}

	div.tools {
		display: flex;
		flex-direction: row;
		align-items: baseline;
		margin-left: 15vw;
		button {
			outline: none;
		}
		button.tab {
			cursor: pointer;
			min-width: 50px;
			background:  transparent;
			border: none;
			padding: 12px;
			margin-right: 15px;
			font-family: Arial, sans-serif;
			color: #777;
			text-align: center;
			font-size: 0.9em;
			&:hover {
				color: #222;
			}
		}
		a.tab {
			cursor: pointer;
			min-width: 50px;
			text-decoration: none;
			background:  transparent;
			border: none;
			padding: 12px;
			margin-right: 15px;
			font-family: Arial, sans-serif;
			color: #777;
			text-align: center;
			font-size: 0.9em;
			&:hover {
				color: #222;
			}
		}
		a.views-search {
			position: absolute;
			box-shadow: 0px 2px 2px 0px grey;
			margin: 0px;
			top: 38px;
			z-index: 52;
			left: 642px;
			color: rgba(0,0,0,.87);
		}
		button.toggleButton {
			color: #777;

			&.pressed {
				background-color: #e0e0e0;
			}
		}

		.tool-list {
			position: absolute;
			left: 140px;
			top: 35px;
			padding: 10px 0px;
			margin: 0px 10px;
			pointer-events: none;

			.search-tools, .message {
				transform: translate(0, -100%);
				transition: transform 0.1s ease-in-out, opacity 0.05s ease-in-out;
			}

			.search-tools {
				display: flex;
				opacity: 0;

				button.toggleButton {
					color: #777;

					&.pressed {
						background-color: #e0e0e0;
					}
				}

			}
			.message {
				opacity: 1;
			}
		}

		.tool-list.show {
			pointer-events: auto;

			.search-tools, .message {
				transform: translate(0, 0);
			}

			.search-tools {
				opacity: 1;
			}

			.message {
				opacity: 0;
			}
		}
	}
}
@media (max-width: 416px){
	a.tab{
		padding: 0px !important;
	}
}
@media (max-width: 392px){
	a.tab_setting{
		display: none;
	}
}
@media (max-width: 416px){
	a.tab_setting{
		padding: 0px;
	}
}

@media (max-width: 768px) {
	div.wrapper {
		div.tab-list {
			margin-left: 0px;
			justify-content: space-around;
		}

		div.tools {
			margin-left: 0px;
			justify-content: space-around;
			.tool-list {
				left: 0;
			}
		}
	}
}

@media (max-width: 560px) {
	div.wrapper {
		top: 129px;
	}
}

@media (max-width: 560px) and (min-width: 518px) {
	div.wrapper {
		margin-left: 2%;
	}
}

@media (max-width: 517px) and (min-width: 488px) {
	div.wrapper {
		margin-left: 2%;
	}
	button.tab {
		padding: 0px!important
	}
}

@media (max-width: 488px) and (min-width: 452px) {
	button.tab {
		margin-right: 5px !important
	}
}

@media (min-width: 769px) and (max-width: 860px) {
	a.views-search {
		left: 554px !important;
	}
}

@media (min-width: 425px) and (max-width: 768px) {
	a.views-search {
		left: 239px !important;
	}
}

@media (min-width: 381px) and (max-width: 424px) {
	a.views-search {
		left: 200px !important;
	}
}

@media (max-width: 380px) {
	a.views-search {
		left: 156px !important;
	}
}

@media (max-width: 452px) {
	button.tab{
		margin-right: 0px!important;
	}
	// button.tab.tool-tab{
	// 	margin-left: 48px!important;
	// }
}
@media (max-width: 380px)  {
	button.tab.tool-tab{
		margin-left: 8px!important;
	}
}
@media (max-width: 340px) {
	button.tab.list{
		padding: 10px 0 10px 10px;
	}
	button.tab.tool-tab{
		margin-right: -15px!important;
		padding: 12px 12px 12px 0px!important
	}
	div.tools{
		margin-left: 0px!important;
	}
}

@media (max-width: 768px) and (min-width: 561px) {
	div.wrapper {
		left: 20%;
	}
}

@media (max-width: 634px) and (min-width: 561px) {
	div.wrapper {
		left: 7%;
	}
}

@media (max-width: 768px) and (min-width: 653px) {
	div.tools {
		margin-left: 12%;
	}
}

.media-wall-route {
	text-decoration: none;
	color: rgba(0,0,0,.87);
}
